<template>
  <view class="medical-records-container">
    <view class="header">
      <text class="title">健康档案</text>
      <text class="edit-btn" @tap="editRecords">编辑</text>
    </view>
    
    <view class="records-content">
      <view class="section">
        <text class="section-title">基本信息</text>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">姓名</text>
            <text class="info-value">{{ records.name }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">性别</text>
            <text class="info-value">{{ records.gender }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">年龄</text>
            <text class="info-value">{{ records.age }}岁</text>
          </view>
          <view class="info-item">
            <text class="info-label">血型</text>
            <text class="info-value">{{ records.bloodType }}</text>
          </view>
        </view>
      </view>
      
      <view class="section">
        <text class="section-title">身体状况</text>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">身高</text>
            <text class="info-value">{{ records.height }}cm</text>
          </view>
          <view class="info-item">
            <text class="info-label">体重</text>
            <text class="info-value">{{ records.weight }}kg</text>
          </view>
          <view class="info-item">
            <text class="info-label">BMI</text>
            <text class="info-value">{{ records.bmi }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">血压</text>
            <text class="info-value">{{ records.bloodPressure }}</text>
          </view>
        </view>
      </view>
      
      <view class="section">
        <text class="section-title">过敏史</text>
        <text class="allergy-content">{{ records.allergies || '无' }}</text>
      </view>
      
      <view class="section">
        <text class="section-title">既往病史</text>
        <text class="history-content">{{ records.medicalHistory || '无' }}</text>
      </view>
      
      <view class="section">
        <text class="section-title">家族病史</text>
        <text class="history-content">{{ records.familyHistory || '无' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { healthRecordApi } from '@/api'

export default {
  data() {
    return {
      records: {
        name: '',
        gender: '',
        age: 0,
        bloodType: '',
        height: 0,
        weight: 0,
        bmi: 0,
        bloodPressure: '',
        allergies: '',
        medicalHistory: '',
        familyHistory: ''
      }
    }
  },
  onLoad() {
    this.loadRecords()
  },
  methods: {
    async loadRecords() {
      try {
        const res = await healthRecordApi.getHealthRecords()
        this.records = res.data
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    editRecords() {
      uni.navigateTo({
        url: '/pages/medical-records/edit'
      })
    }
  }
}
</script>

<style lang="scss">
.medical-records-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 20rpx;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .edit-btn {
      font-size: 28rpx;
      color: #007AFF;
    }
  }
  
  .records-content {
    .section {
      background: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
        display: block;
      }
      
      .info-list {
        display: flex;
        flex-wrap: wrap;
        
        .info-item {
          width: 50%;
          margin-bottom: 30rpx;
          
          .info-label {
            font-size: 28rpx;
            color: #666;
            margin-bottom: 10rpx;
            display: block;
          }
          
          .info-value {
            font-size: 32rpx;
            color: #333;
          }
        }
      }
      
      .allergy-content,
      .history-content {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}
</style> 